<template>
  <div class="compontent_container" v-loading="loading">
    <div class="top_header">
      <div class="top_left">
        <div class="top_title">{{ paperTypeText[paperType] }}批改</div>
        <div class="line"></div>
        <div class="msg_info">
          <div class="text">
            <span v-if="groupId">{{ msgInfo.groupName }} </span>{{ msgInfo.studentInfo }}
          </div>
          <div class="index_name">
            <ancestorsNameDeal max-length="40" :text="msgInfo.taskInfo"></ancestorsNameDeal>
          </div>
        </div>
      </div>
      <div class="top_right">
        <div class="paper_info">
          <div class="text">总分：{{ formatPaperData.totalScore }}分</div>
          <div class="line"></div>
          <template v-if="paperType==1">
            <div class="text">及格分数：{{ formatPaperData.passingGrade }}分</div>
            <div class="line"></div>
          </template>
          <div class="text">{{ paperTypeText[paperType] }}耗时：{{ examUseTime ? examUseTime : '--' }}</div>
        </div>
        <div class="icons">
          <svg-icon @click="calculateScore(true)" class-name="answer_sheet_icon pointer" icon-class="answer_sheet"></svg-icon>
          <svg-icon @click="showSheet = true" class-name="menu_paper pointer" icon-class="menu_paper"></svg-icon>
        </div>
      </div>
      <!--   题目列表   -->
      <div class="answer_sheet" v-if="showSheet">
        <div class="answer_sheet_title">
          <span>题目列表</span>
          <svg-icon @click="showSheet = false" class-name="menu_paper pointer color_dark_green" icon-class="menu_paper"></svg-icon>
        </div>
        <div class="sheet_question_list">
          <div v-for="(item, index) in formatPaperData.examPaperTitleList" :key="index">
            <a @click="scrollToAnchor(item, 1)" class="sheet_question_item">{{ item.title }}
              <span class="paperTitle">(共{{ item.topicNum }}题)</span>
            </a>
            <!--     答题详情       -->
            <div class="sheet_answer_collect">
              <div v-for="(childItem, childIndex) in item.topicList" :key="childIndex">
                <template v-if="objectiveTypes.includes(childItem.topicType)">
                  <!--   未批改    -->
                  <div @click="scrollToAnchor(childItem, 2)" v-if="!childItem.scoreGot && childItem.scoreGot!=0"
                       class="sheet_answer_collect_item"
                  >
                    {{ childItem.sort }}
                  </div>
                  <template v-if="childItem.scoreGot">
                    <!--   答错题    -->
                    <div @click="scrollToAnchor(childItem, 2)" v-if="childItem.scoreGot != childItem.score"
                         class="sheet_answer_collect_item fail_select"
                    >
                      {{ childItem.sort }}
                    </div>
                    <!--   答对题    -->
                    <div @click="scrollToAnchor(childItem, 2)" v-if="childItem.scoreGot == childItem.score"
                         class="sheet_answer_collect_item right_answer"
                    >
                      {{ childItem.sort }}
                    </div>
                  </template>
                </template>
                <template v-else>
                  <!--   答错题    -->
                  <div @click="scrollToAnchor(childItem, 2)" v-if="!childItem.right" class="sheet_answer_collect_item fail_select">
                    {{ childItem.sort }}
                  </div>
                  <!--   答对题    -->
                  <div @click="scrollToAnchor(childItem, 2)" v-if="childItem.right" class="sheet_answer_collect_item right_answer">
                    {{ childItem.sort }}
                  </div>
                </template>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="main_content">
      <!--   main-connect内容   -->
      <div ref="leftScroll" class="content_left" @scroll="scrollLeft">
        <div class="answer_list" v-for="(paperItem, paperIndex) in formatPaperData.examPaperTitleList" :key="paperIndex">
          <div :id="paperItem.titleId" class="paper_title_box">
            {{ paperItem.title }}<span class="paper_title">(共{{ paperItem.topicNum }}题，{{ paperItem.score }}分)</span>
          </div>
          <div class="answer_question" v-for="(item, index) in paperItem.topicList" :key="index">
            <!--  包含html    -->
            <div v-if="$isIncludesHtml(item.topicContent)" :id="item.id" class="question_content line_feed" v-html="`${item.topicContent.slice(0,3)}${item.sort}.<span class='color_orange'>【${$store.getters.topicTypeText[item.topicType]}】</span>${$renderedDescription(item.topicContent.slice(3))}<span class='color_info'>(${item.score}分)</span>`"></div>
            <!--  不包含html    -->
            <div v-else :id="item.id" class="question_content line_feed" v-html="`${item.sort}.<span class='color_orange'>【${$store.getters.topicTypeText[item.topicType]}】</span>${$renderedDescription(item.topicContent)}<span class='color_info'>(${item.score}分)</span>`"></div>
        <!--  试题详情  -->
        <div class="item_answer">
          <!--    填空题部分        -->
          <div v-if="item.topicType == 3">
            <div class="blank_item" v-for="(optionIndex) in item.optionCount" :key="optionIndex">
              <div class="answer_content line_feed"
                   v-html="`${optionIndex}.${$renderedDescription(item.multiAnswers[optionIndex - 1]?item.multiAnswers[optionIndex - 1] : '')}`"
              ></div>
            </div>
          </div>
          <!--    单选题部分    item.userAnswer    -->
          <template v-if="item.topicType == 0">
            <div class="option_item pointer" v-for="(answerItem, answerIndex) in item.topicOptionList" :key="answerIndex">
              <div
                :class="{'option_selected':answerItem.isChecked,'right_bg':answerItem.isChecked && item.right,'wrong_bg':answerItem.isChecked && !item.right}"
                class="option_label"
              >{{ labelList[answerIndex] }}
              </div>
              <div class="option_value line_feed" v-html="$renderedDescription(answerItem.optionValue)"></div>
            </div>
          </template>
          <!--    多选题部分   multiAnswers     -->
          <template v-if="item.topicType == 1">
            <div class="option_item pointer" v-for="(answerItem, answerIndex) in item.topicOptionList" :key="answerIndex">
              <div
                :class="{'option_selected':answerItem.isChecked,'right_bg':answerItem.isChecked && item.trueAnswer.includes(answerItem.optionLabel),'wrong_bg':answerItem.isChecked && !item.trueAnswer.includes(answerItem.optionLabel)}"
                class="option_label"
              >{{ labelList[answerIndex] }}
              </div>
              <div class="option_value line_feed" v-html="$renderedDescription(answerItem.optionValue)"></div>
            </div>
          </template>
          <!--    判断题部分        -->
          <el-radio-group
            disabled
            v-removeAriaHidden
            v-if="item.topicType == 2"
            v-model="item.userAnswer"
          >
            <el-radio :label="'正确'">对</el-radio>
            <el-radio :label="'错误'">错</el-radio>
          </el-radio-group>
          <!--      简答题部分      -->
          <div v-if="objectiveTypes.includes(item.topicType)" class="textarea_info line_feed"
               v-html="`${$renderedDescription(item.userAnswer)}`"
          ></div>
          <!--  附件    -->
          <div class="attachment" v-if="objectiveTypes.includes(item.topicType) && item.echoFile.length>0">
            <div style="width: 50px">附件</div>
            <div class="pictures">
              <!--     做题状态可点击上传        -->
              <div class="add_class">
                <div class="view_img_local" v-for="(fileItem, fileIndex) in item.echoFile" :key="fileIndex">
                  <cusImage
                    v-if="fileItem.type == 1"
                    class="local_img_url"
                    :src="fileItem.url"
                    :showEdit.sync="showDrawer||$route.query.routeSign == 'stu'"
                    @editImage="showImgDrawer($event, item)"
                    :key="fileIndex"
                    :preview-src-list="item.previewList"
                  >
                  </cusImage>
                  <div v-if="fileItem.type == 2" class="local_video_box">
                    <img
                      class="video_img"
                      src="@/assets/images/video_img.png"
                      alt="加载失败"
                    />
                    <video-review
                      class="video_box"
                      ref="videoReview"
                      :videoSrc="fileItem.url"
                    ></video-review>
                  </div>
                  <div
                    @click="lookFiles(fileItem.url, fileItem.name)"
                    v-if="fileItem.type == 3 || fileItem.type == 4"
                    class="local_other_box"
                  >
                    <i class="el-icon-document"></i>
                    <el-tooltip
                      class="fileItem"
                      effect="dark"
                      :content="fileItem.name"
                      placement="top"
                    >
                      <div class="other_text">
                        <span>{{ fileItem.name }}</span>
                        {{ fileItem.name.slice(fileItem.name.lastIndexOf('.'), fileItem.name.length) }}
                      </div>
                    </el-tooltip>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="detail_box">
          <!--  客观题部分  -->
          <div v-if="!objectiveTypes.includes(item.topicType)" style="display: flex;gap: 0 10px;">
            <!--  回答正确/回答错误  -->
            <span v-if="item.right" class="answer_right">回答正确</span>
            <span v-if="!item.right" class="answer_fail">回答错误</span>
            <!--  系统评分：  -->
            <span v-if="item.scoreGot || item.scoreGot==0" class="score_got">系统评分： <span class="answer_right">{{ item.scoreGot }}</span></span>
          </div>
          <!--  答案：  -->
          <template v-if="item.trueAnswer">
            <div v-if="$isIncludesHtml(item.trueAnswer)" class="score_got color_dark_green"
                 v-html="`${item.trueAnswer.slice(0,3)}答案：${$renderedDescription(item.trueAnswer.slice(3))}`"
            ></div>
            <div v-else class="score_got color_dark_green" v-html="`答案：${$renderedDescription(item.trueAnswer)}`"></div>
          </template>
          <!--  解析：  -->
          <template v-if="item.resolve">
            <div v-if="$isIncludesHtml(item.resolve)" class="resolve_text"
                 v-html="`${item.resolve.slice(0,3)}解析：${$renderedDescription(item.resolve.slice(3))}`"
            ></div>
            <div v-else class="resolve_text" v-html="`解析：${$renderedDescription(item.resolve)}`"></div>
          </template>
          <!--  图片批注    -->
          <template v-if="objectiveTypes.includes(item.topicType)">
            <div class="settle_imgs">
              <div class="settle_lavel">图片批注:</div>
              <div class="picture_list">
                <!--     有附图信息遍历展示        -->
                <div class="view_img relative" v-for="(settleItem, settleIndex) in item.settlePic" :key="index">
                  <el-image class="view_img_url" :src="settleItem" :key="settleIndex" :preview-src-list="item.settlePic"/>
                  <img v-if="$route.query.routeSign != 'stu'" @click="delImg(settleIndex, item)" class="close_img pointer"
                       src="@/assets/images/close_img.png" alt="加载失败"
                  />
                </div>
                <!--     没有附图信息        -->
                <div class="empty_text" v-if="item.settlePic.length == 0">
                  暂无图片批注
                </div>
              </div>
            </div>
          </template>
        </div>
      </div>
    </div>
    <!--   评价维度打分    -->
    <div class="evaluate_main" v-if="formatPaperData.ccExamPaper.evaluateGradeEntityList">
      <!--  approvalType  1-师评 2-组长评分(互评) 3-自评 4-组间互评  -->
      <div class="select" v-if="groupId && approvalType != 3 && approvalType != 4">
        <span class="label">给分模式:</span>
        <el-radio-group v-removeAriaHidden v-model="evaluateType">
          <el-radio-button label="0">成员同分</el-radio-button>
          <el-radio-button label="1">独立配分</el-radio-button>
        </el-radio-group>
      </div>
      <div style="display: flex;justify-content: flex-end; margin-bottom: 10px;">
        <el-button
          @click="giveDafaultScore"
          class="operation_btn"
          type="primary"
        >
          自动赋分
        </el-button>
      </div>

      <div v-show="evaluateType == 0 || !groupId" class="others_content">
        <div class="title">
          能力素养评价 <span>注：支持0～100分，支持一位小数。</span>
        </div>
        <div class="others_content_item" v-for="(item, index) in stuEvaluateList" :key="index">
          <div class="title_child">
            {{ item.categoryName }}
          </div>
          <div class="param_list">
            <div class="param_item" v-for="(paramItem, paramIndex) in item.ccExamEvaluateParamEntityList" :key="paramIndex">
              <span class="text" :id="`param_${paramItem.paramId}`">{{ paramItem.paramName }}</span>
              <el-input-number
                class="param_ipt"
                placeholder="请输入"
                v-model="paramItem.score"
                :min="0"
                :precision="1"
                :controls="false"
                :max="100"
                size="mini"
              />
              <span class="text">分</span>
            </div>
          </div>
        </div>
      </div>
      <div :id="`stu_${evaluateItem.studentId}`" v-show="evaluateType == 1"
           class="others_content"
           v-for="(evaluateItem, evaluateIndex) in copyGradeEntityList"
           :key="evaluateIndex"
      >
        <div style="margin-bottom: 10px; color: #28b28b; font-weight: bold">
          {{ evaluateItem.studentName }}
        </div>
        <div class="title">
          能力素养评价 <span>注：支持0～100分。</span>
        </div>
        <div class="others_content_item" v-for="(item, index ) in evaluateItem.ccExamEvaluateCategoryEntityList" :key="index">
          <div class="title_child">
            {{ item.categoryName }}
          </div>
          <div class="param_list">
            <div class="param_item" v-for="(paramItem, paramIndex) in item.ccExamEvaluateParamEntityList" :key="paramIndex">
              <span class="text">{{ paramItem.paramName }}</span>
              <el-input-number
                class="param_ipt"
                placeholder="请输入"
                v-model="paramItem.score"
                :min="0"
                :precision="1"
                :controls="false"
                :max="100"
                size="mini"
              />
              <span class="text">分</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="content_right">
    <div ref="rightScroll" class="right_main" @scroll="scrollRight">
      <div v-for="(paperItem, paperIndex) in formatPaperData.examPaperTitleList" :key="paperIndex">
        <div :id="paperItem.titleId" class="paper_box" v-if="paperItem.showBigTitleIds.length>0">
          {{ paperItem.title }}<span class="paper_title">(共{{ paperItem.topicNum }}题，{{ paperItem.score }}分)</span>
        </div>
        <div :id="`approval_${item.id}`" class="approval_question mb_11" v-for="(item, index) in paperItem.topicList" :key="index">
          <!--     教师审批----普通模式       -->
          <template v-if="!groupId && objectiveTypes.includes(item.topicType)">
            <div style="color: #ef7d5a">第{{ item.sort }}题 ({{ item.score }}分)</div>
            <div class="approval_score">
              <div class="approval_item">
                <div class="scoreget_label">得分:</div>
                <el-input-number
                  class="ipt_number_item"
                  placeholder="请输入得分"
                  v-model="item.scoreGot"
                  :min="0"
                  :precision="1"
                  :controls="false"
                  :max="item.score"
                  size="small"
                />
              </div>
            </div>
            <div class="approval_remoke_item" v-if="$route.query.routeSign != 'stu'">
              <!--     批注只有简答题有       -->
              <div class="scoreget_label">批注:</div>
              <el-input
                class="remake_approval"
                type="textarea"
                :autosize="{ minRows: 3, maxRows: 4 }"
                placeholder="请输入批注"
                v-model="item.teacherRemark"
              >
              </el-input>
            </div>
          </template>
          <!--     教师审批----小组模式        -->
          <template v-if="groupId && objectiveTypes.includes(item.topicType)">
            <div class="group_approval_all">
              <div style="color: #ef7d5a">第{{ item.sort }}题 ({{ item.score }}分)</div>
              <div class="approval_item mb_11" v-if="approvalType != 3 && approvalType != 4">
                <span class="scoreget_label">给分模式:</span>
                <el-radio-group
                  class="radio_group"
                  size="small"
                  v-removeAriaHidden
                  v-model="item.scoreType"
                >
                  <el-radio-button label="0">成员同分</el-radio-button>
                  <el-radio-button label="1">独立配分</el-radio-button>
                </el-radio-group>
              </div>
              <div class="approval_item" v-if="item.scoreType == 0">
                <span class="scoreget_label">得分:</span>
                <el-input-number
                  class="ipt_number_item"
                  placeholder="请输入得分"
                  v-model="item.scoreGot"
                  :min="0"
                  :precision="1"
                  :controls="false"
                  :max="item.score"
                  size="small"
                />
              </div>
              <div v-if="item.scoreType == 0&&$route.query.routeSign != 'stu'" class="approval_remoke_item">
                <!--     批注只有简答题有       -->
                <span class="scoreget_label">批注:</span>
                <el-input
                  class="remake_approval"
                  type="textarea"
                  :autosize="{ minRows: 3, maxRows: 4 }"
                  placeholder="请输入批注"
                  v-model="item.teacherRemark"
                >
                </el-input>
              </div>
              <template v-if="item.scoreType == 1">
                <div
                  class="mb_11"
                  :id="`${item.id}_${groupItem.studentId}`"
                  style=" display: flex;flex-direction: column;"
                  v-for="groupItem in item.groupMemberList"
                  :key="groupItem.studentId"
                >
                  <div class="approval_item">
                    <span class="scoreget_label font_bold">{{ groupItem.studentName }}:</span>
                    <el-input-number
                      class="ipt_number_item"
                      placeholder="请输入得分"
                      v-model="groupItem.scoreGot"
                      :min="0"
                      :precision="1"
                      :controls="false"
                      :max="item.score"
                      size="small"
                    />
                  </div>
                  <div class="approval_remoke_item" v-if="$route.query.routeSign != 'stu'">
                    <!--     批注只有简答题有       -->
                    <span class="scoreget_label">批注:</span>
                    <el-input
                      class="remake_approval"
                      type="textarea"
                      :autosize="{ minRows: 3, maxRows: 4 }"
                      placeholder="请输入批注"
                      v-model="groupItem.teacherRemark"
                    >
                    </el-input>
                  </div>
                </div>
              </template>
            </div>
          </template>
        </div>
      </div>
    </div>
    <div class="btns" v-if="$route.query.routeSign != 'stu'">
      <div class="preview_btn" v-if="!formatPaperData.ccExamPaper.isSettle" @click="sendBack">{{
          paperType == 1 ? '退回重考' : '退回重做'
        }}
      </div>
      <div class="prev_btn" @click="submitNext">下一份</div>
      <div class="update_btn" @click="submitApproval">提交</div>
    </div>
    <div class="btns" v-if="$route.query.routeSign == 'stu'">
      <div class="prev_btn" v-if="needNext == 1" @click="submitNextByStu">下一份</div>
      <div class="update_btn" @click="submitApproval">提交</div>
    </div>
  </div>
  </div>
  <!--  我的评分  -->
  <el-dialog
    center
    title="我的评分"
    :visible="openDialog"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    @close="cancelMyScore"
    width="611px"
    append-to-body
  >
    <div v-if="!groupId" class="scoregot_content">
      我的评分：<span style="color: #ff0000">{{ totalScoreGot }}</span>
    </div>
    <div v-if="groupId" class="scoregot_content">
      <el-table height="calc(100vh - 370px)" :data="groupMemberScoreGotList">
        <el-table-column
          prop="studentName"
          align="center"
          label="姓名"
        ></el-table-column>
        <el-table-column
          prop="score"
          align="center"
          label="当前评分"
        ></el-table-column>
      </el-table>
    </div>
    <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="medium" @click="cancelMyScore">关 闭</el-button>
      </span>
  </el-dialog>
  <!--  文件预览  -->
  <fileDrawer
    :show.sync="drawer"
    :url="drawerurl"
    :name="drawername"
    :type="drawertype"
  ></fileDrawer>
  <!--  图片批注  -->
  <ImageEditor
    :open.sync="showDrawer"
    :imageUrl="imageEditorUrl"
    @saveEditorImage="saveImage"
  ></ImageEditor>
  </div>
</template>

<script>
import ImageEditor from '@/components/ImageEditor'
import videoReview from '@/components/videoReview/videoReview'
import fileDrawer from '@/components/fileDrawer'
import ancestorsNameDeal from '@/components/ancestorsNameDeal'
import { approvalAnswerApi, returnExamPaperApi, getNextExamPaperForGroupApi, getNextExamPaperApi } from '@/api/ExaminationModule/approval'

export default {
  name: 'approvalComponent',
  components: {
    ImageEditor,
    fileDrawer,
    videoReview,
    ancestorsNameDeal
  },
  props: {
    // paperType 1为考核 3为练习 6为作业
    paperType: {
      type: [Number, String],
      default: 1
    },
    //approvalType  1-师评 2-组长评分(互评) 3-自评 4-组间互评
    approvalType: {
      type: [Number, String],
      default: ''
    },
    loading: {
      type: Boolean,
      default: false
    },
    //试卷性情
    examInfo: {
      type: Object,
      default: () => {
        return {}
      }
    },
    // 正常模式下评价维度列表
    stuEvaluateList: {
      type: Array,
      default: () => {
        return []
      }
    },
    // 小组模式下评价维度列表
    copyGradeEntityList: {
      type: Array,
      default: () => {
        return []
      }
    },
    examUseTime: {
      type: [String],
      default: ''
    },
    // 被批改试卷信息
    msgInfo: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      drawerChildItem: {},
      imageEditorUrl: '',
      openDialog: false,
      showDrawer: false,

      showSheet: false,
      drawer: false,
      drawerurl: '',
      drawername: '',
      drawertype: '',
      examTotal: 0,
      // 图片放大
      imgPreview: {
        img: '',
        show: false
      },
      groupMemberScoreGotList: [],
      totalScoreGot: 0,
      nextKeyId: '',
      //评价维度提交类型 0：成员同分 1：独立给分
      evaluateType: 0,
      labelList: this.$store.getters.EN,
      objectiveTypes: [4, 5],
      passedStatus: [1, -1],
      paperTypeText: {
        1: '考核',
        3: '练习',
        6: '作业'
      },
      //判断是否是小组模式
      groupId: null,
      isSyncing: false, // 标志位：是否正在同步滚动
      formatPaperData: {
        ccExamPaper: {
          evaluateGradeEntityList: null
        },
        examPaperTitleList: []
      }
    }
  },
  watch: {
    examInfo: {
      deep: true,
      handler(val) {
        console.log(val)
        this.evaluateType = val.ccExamPaper.evaluateType
        this.groupId = val.groupId
        this.formatPaperData = val
        console.log('formatPaperData', this.formatPaperData)
      }
    }
  },
  created() {
    this.scrollLeft = this.debounce(this.scrollLeft, 100)
    this.scrollRight = this.debounce(this.scrollRight, 100)
  },
  methods: {
    // 防抖函数（定义在 methods 中）
    debounce(func, wait) {
      let timeout
      return function executedFunction(...args) {
        const later = () => {
          clearTimeout(timeout)
          func.apply(this, args)
        }
        clearTimeout(timeout)
        timeout = setTimeout(later, wait)
      }
    },
    scrollLeft() {
      if (this.isSyncing) return // 如果是代码触发的滚动，不处理
      this.isSyncing = true
      this.syncRightScroll()
      // 重置标志（不能太快，要等对方容器停止触发 scroll）
      this.$nextTick(() => {
        setTimeout(() => {
          this.isSyncing = false
        }, 500) // 略大于平滑滚动的频繁触发期
      })
    },

    scrollRight() {
      if (this.isSyncing) return
      this.isSyncing = true
      this.syncLeftScroll()
      this.$nextTick(() => {
        setTimeout(() => {
          this.isSyncing = false
        }, 500)
      })
    },

    syncRightScroll() {
      const leftContainer = this.$refs.leftScroll
      const questions = leftContainer.querySelectorAll('.question_content')
      let currentTopQuestion = null
      let minDistance = Infinity

      for (let q of questions) {
        const rect = q.getBoundingClientRect()
        const containerRect = leftContainer.getBoundingClientRect()
        if (rect.bottom >= containerRect.top && rect.top <= containerRect.bottom) {
          const distance = Math.abs(rect.top - containerRect.top)
          if (distance < minDistance) {
            minDistance = distance
            currentTopQuestion = q
          }
        }
      }

      if (currentTopQuestion) {
        const questionId = currentTopQuestion.id
        this.scrollToRightQuestion(questionId)
      }
    },

    syncLeftScroll() {
      const rightContainer = this.$refs.rightScroll
      const approvals = rightContainer.querySelectorAll('.approval_question')
      let currentTopApproval = null
      let minDistance = Infinity

      for (let ap of approvals) {
        const rect = ap.getBoundingClientRect()
        const containerRect = rightContainer.getBoundingClientRect()
        if (rect.bottom >= containerRect.top && rect.top <= containerRect.bottom) {
          const distance = Math.abs(rect.top - containerRect.top)
          if (distance < minDistance) {
            minDistance = distance
            currentTopApproval = ap
          }
        }
      }

      if (currentTopApproval) {
        const id = currentTopApproval.id.replace('approval_', '')
        this.scrollToLeftQuestion(id)
      }
    },

    scrollToRightQuestion(questionId) {
      const rightContainer = this.$refs.rightScroll
      const target = rightContainer.querySelector(`[id="approval_${questionId}"]`)

      if (!target) return

      // ✅ 正确计算：目标元素相对于容器的滚动距离
      const targetRect = target.getBoundingClientRect()
      const containerRect = rightContainer.getBoundingClientRect()
      const scrollTop = rightContainer.scrollTop
      const relativeTop = targetRect.top - containerRect.top + scrollTop

      rightContainer.scrollTo({
        top: relativeTop,
        behavior: 'smooth'
      })
    },

    scrollToLeftQuestion(questionId) {
      const leftContainer = this.$refs.leftScroll
      const target = leftContainer.querySelector(`[id="${questionId}"]`)

      if (!target) return

      // ✅ 正确计算：目标元素相对于滚动容器的顶部距离
      const targetRect = target.getBoundingClientRect()
      const containerRect = leftContainer.getBoundingClientRect()
      const relativeTop = targetRect.top - containerRect.top + leftContainer.scrollTop

      leftContainer.scrollTo({
        top: relativeTop,
        behavior: 'smooth'
      })
    },
    delImg(index, childItem) {
      this.$modal.confirm(`确定删除本批注吗？删除后不可撤销！`, `删除确认`, {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          childItem.settlePic.splice(index, 1)
        })
        .catch(() => {
        })
    },
    saveImage(e) {
      this.drawerChildItem.settlePic.push(e)
      this.$modal.msgSuccess('保存成功！可点击关闭按钮在图片批注里查阅！')
    },
    showImgDrawer(item, childItem) {
      if (this.$route.query.routeSign == 'stu') {
        console.log('44444')
        return
      }
      this.drawerChildItem = childItem
      this.imageEditorUrl = item
      this.showDrawer = true
    },
    lookFiles(url, name) {
      let uploadType = url
        .slice(url.lastIndexOf('.'), url.length)
        .toLowerCase()
      let arr = [
        '.gif',
        '.png',
        '.jpeg',
        '.jpg',
        '.mp4',
        '.webm',
        '.pdf',
        '.wps',
        '.docx',
        '.doc',
        '.rtf',
        '.pptx',
        '.ppt',
        '.xls',
        '.xlsx',
        '.wps',
        '.ofd',
        '.txt',
        '.js',
        '.json',
        '.css',
        '.sql',
        '.xml',
        '.java',
        '.cs(c#)'
      ]
      if (arr.indexOf(uploadType) > -1) {
        this.drawer = true
        this.drawerurl = url
        this.drawername = name
        this.drawertype = 1
      } else {
        window.open(url, '_blank')
      }
    },
    //锚点跳转
    scrollToAnchor(item, type) {
      if (type == 1) {
        const anchor = document.getElementById(item.titleId)
        if (anchor) {
          anchor.scrollIntoView({ behavior: 'smooth' })
        }
      } else {
        const anchor = document.getElementById(item.id)
        if (anchor) {
          anchor.scrollIntoView({ behavior: 'smooth' })
        }
      }
    },
    //退回重做/重考
    sendBack() {
      this.$confirm('退回后，学生该试卷内容将被清空，本次考核不计入重考次数，是否确认退回？', '退回确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        let loading = this.$loading({
          lock: true,
          text: '正在处理',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.3)'
        })
        try {
          let res = await returnExamPaperApi(this.formatPaperData.ccExamPaper.id)
          if (res.code == 200) {
            this.$modal.msgSuccess('退回成功')
            this.$router.go(-1)
          }
        } catch (e) {
          console.error(e)
        } finally {
          loading.close()
        }
      }).catch(() => {
        this.$modal.msgInfo('已取消')
      })
    },
    //提交下一份
    async submitNext() {
      //校验得分分数
      let arr = this.checkSubmitScore()
      if (!arr) {
        return
      }
      const loading = this.$loading({
        lock: true,
        text: '正在提交',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.3)'
      })
      try {
        let result = await approvalAnswerApi(arr)
        const { code } = result
        if (code == 200) {
          let res = await getNextExamPaperApi(this.$route.query.keyId)
          if (res.data.ccExamPaper) {
            this.$modal.msgSuccess('提交成功！')
            this.nextKeyId = res.data.ccExamPaper.id
            this.$router.replace({
              path: '/approvalAnswer',
              query: {
                // keyId就是考试试卷id
                keyId: this.nextKeyId,
                approvalType: this.approvalType,
                type: 'next',
                studentInfo: res.data.studentInfo,
                groupName: res.data.groupName,
                taskInfo: res.data.taskInfo
              }
            })
          } else {
            this.$modal.msgSuccess('提交成功，当前试卷为最后一份~')
            this.$router.go(-1)
          }
        }
      } catch (e) {
        console.error(e)
      } finally {
        loading.close()
      }
    },
    //提交下一份
    async submitNextByStu() {
      //校验得分分数
      let arr = this.checkSubmitScore()
      if (!arr) {
        return
      }
      const loading = this.$loading({
        lock: true,
        text: '正在提交',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.3)'
      })
      try {
        let result = await approvalAnswerApi(arr)
        const { code } = result
        if (code == 200) {
          let res = await getNextExamPaperForGroupApi(this.$route.query.keyId)
          if (res.data.ccExamPaper) {
            this.$modal.msgSuccess('提交成功！')
            this.nextKeyId = res.data.ccExamPaper.id
            this.$router.replace({
              path: '/approvalAnswer',
              query: {
                // keyId就是考试试卷id
                keyId: this.nextKeyId,
                approvalType: this.approvalType,
                userId: this.$store.getters.userId,
                routeSign: 'stu',
                leaderId: this.$store.getters.studentId,
                needNext: this.approvalType == 4 ? '1' : '0'
              }
            })
          } else {
            this.$modal.msgSuccess('提交成功，当前试卷为最后一份~')
            this.$router.go(-1)
          }
        }
      } catch (e) {
        console.error(e)
      } finally {
        loading.close()
      }
    },
    //校验主观题得分分数 和 评价维度得分
    checkSubmitScore() {
      let arr = []
      //校验得分分数
      //遍历  大题
      for (const examPaperElement of this.formatPaperData.examPaperTitleList) {
        //遍历  小题
        for (const argumentElement of examPaperElement.topicList) {
          //需要评分的类型（topicType==4||5）
          if (this.objectiveTypes.includes(argumentElement.topicType)) {
            //小组组员同分 || 非小组模式提交
            if (argumentElement.scoreType == 0 || !this.groupId) {
              //组员同分  分数不能为空   argumentElement.scoreGot（同分分数字段）

              if (!argumentElement.scoreGot && argumentElement.scoreGot != '0') {
                this.$modal.msgWarning(`请先对【${examPaperElement.title}】【第${argumentElement.sort}题】进行评分再提交`)
                const anchor = document.getElementById(argumentElement.id)
                if (anchor) {
                  anchor.scrollIntoView({ behavior: 'smooth' })
                }
                const anchorScore = document.getElementById(`approval__${argumentElement.id}`)
                if (anchorScore) {
                  anchorScore.scrollIntoView({ behavior: 'smooth' })
                }
                return false
              }
              // 组员同分  同分分数不能大于该题目总分 argumentElement.scoreGot（同分分数字段）
              if (argumentElement.scoreGot > argumentElement.score) {
                this.$modal.msgWarning(`【${examPaperElement.title}】【第${argumentElement.sort}题】得分大于该题目总分，请重新打分！`)
                const anchor = document.getElementById(argumentElement.id)
                if (anchor) {
                  anchor.scrollIntoView({ behavior: 'smooth' })
                }
                return false
              }
              //存储传参对象
              let obj = {
                examPaperTopicId: argumentElement.id,
                right: argumentElement.right,
                groupId: this.groupId,
                scoreType: argumentElement.scoreType,
                settlePic: argumentElement.settlePic ? argumentElement.settlePic.join(',') : '',
                ccPaperTopicGradeScoreList: []
              }
              //正常模式下处理传参 (自评传参同)
              if (!this.groupId || this.approvalType == 3) {
                let aloneObj = {
                  studentId: this.approvalType == 3 ? this.$store.getters.studentId : this.formatPaperData.ccExamPaper.studentId,
                  examPaperTopicId: argumentElement.id,
                  scoreGot: argumentElement.scoreGot,
                  teacherRemark: argumentElement.teacherRemark
                }
                obj.ccPaperTopicGradeScoreList.push(aloneObj)
              } else {
                //小组模式组员同分  处理传参
                //遍历  小组组员列表  将同分分数赋值给每个成员
                for (const groupMemberListElement of argumentElement.groupMemberList) {
                  groupMemberListElement.scoreGot = argumentElement.scoreGot
                }
                obj.ccPaperTopicGradeScoreList = argumentElement.groupMemberList
              }
              arr.push(obj)
            }
            //小组组员独立配分
            if (argumentElement.scoreType == 1) {
              //遍历  小组组员列表
              for (const groupMemberListElement of argumentElement.groupMemberList) {
                //判断  每个组员都有评分
                if (!groupMemberListElement.scoreGot && groupMemberListElement.scoreGot != '0') {
                  this.$modal.msgWarning(`请先对【${examPaperElement.title}】【第${argumentElement.sort}题】独立配分模式【${groupMemberListElement.studentName}】进行评分再提交`)
                  const anchor = document.getElementById(argumentElement.id)
                  if (anchor) {
                    anchor.scrollIntoView({ behavior: 'smooth' })
                  }
                  const anchorScore = document.getElementById(`${argumentElement.id}_${groupMemberListElement.studentId}`)
                  if (anchorScore) {
                    anchorScore.scrollIntoView({ behavior: 'smooth' })
                  }
                  return false
                }
                //判断  每个组员的评分不可大于题目总分
                if (groupMemberListElement.scoreGot > argumentElement.score) {
                  this.$modal.msgWarning(`【${examPaperElement.title}】【第${argumentElement.sort}题】独立配分模式【${groupMemberListElement.studentName}】的得分大于该题目总分，请重新打分！`)
                  const anchor = document.getElementById(argumentElement.id)
                  if (anchor) {
                    anchor.scrollIntoView({ behavior: 'smooth' })
                  }
                  const anchorScore = document.getElementById(`${argumentElement.id}_${groupMemberListElement.studentId}`)
                  if (anchorScore) {
                    anchorScore.scrollIntoView({ behavior: 'smooth' })
                  }
                  return false
                }
              }
              //存储传参对象
              let obj = {
                examPaperTopicId: argumentElement.id,
                right: argumentElement.right,
                groupId: this.groupId,
                scoreType: argumentElement.scoreType,
                settlePic: argumentElement.settlePic ? argumentElement.settlePic.join(',') : '',
                ccPaperTopicGradeScoreList: []
              }
              obj.ccPaperTopicGradeScoreList = argumentElement.groupMemberList
              arr.push(obj)
            }
          }
        }
      }
      //校验评价维度得分
      let evaluateList = []
      if (!this.groupId || this.evaluateType == 0) {
        //正常模式和小组模式独立给分情况
        for (const stuEvaluateListElement of this.stuEvaluateList) {
          for (const entityItem of stuEvaluateListElement.ccExamEvaluateParamEntityList) {
            if (!entityItem.score && entityItem.score != '0') {
              this.$modal.msgWarning(`请先对【${stuEvaluateListElement.categoryName}】评价维度【${entityItem.paramName}】项进行评分再提交`)
              const anchor = document.getElementById(`param_${entityItem.paramId}`)
              if (anchor) {
                anchor.scrollIntoView({ behavior: 'smooth' })
              }
              return false
            }
          }
        }
        if (!this.groupId || this.approvalType == 3) {
          //正常模式
          evaluateList.push({ ccExamEvaluateCategoryEntityList: this.stuEvaluateList })
        } else {
          // 小组模式组员同分
          for (const item of this.copyGradeEntityList) {
            let obj = {
              ccExamEvaluateCategoryEntityList: JSON.parse(JSON.stringify(this.stuEvaluateList)),
              studentId: item.studentId
            }
            for (const itemStu of obj.ccExamEvaluateCategoryEntityList) {
              itemStu.studentId = item.studentId
              for (const itemStuElement of itemStu.ccExamEvaluateParamEntityList) {
                itemStuElement.studentId = item.studentId
              }
            }
            evaluateList.push(obj)
          }
        }
      }
      if (this.evaluateType == 1) {
        for (const copyGradeEntityElement of this.copyGradeEntityList) {
          for (const itemElement of copyGradeEntityElement.ccExamEvaluateCategoryEntityList) {
            for (const entityItem of itemElement.ccExamEvaluateParamEntityList) {
              if (!entityItem.score && entityItem.score != '0') {
                this.$modal.msgWarning(`请先对学生【${copyGradeEntityElement.studentName}】【${itemElement.categoryName}】评价维度【${entityItem.paramName}】项进行评分再提交`)
                const anchor = document.getElementById(`stu_${copyGradeEntityElement.studentId}`)
                if (anchor) {
                  anchor.scrollIntoView({ behavior: 'smooth' })
                }
                return false
              }
            }
          }
        }
        evaluateList = this.copyGradeEntityList
      }
      let data = {
        evaluateType: this.evaluateType,
        ccExamEvaluateGradeEntityList: evaluateList,
        ccPaperTopicGradeList: arr,
        examPaperId: this.formatPaperData.ccExamPaper.id,
        // approvalType  1-师评 2-组长评分(互评) 3-自评 4-组间互评
        //有提交类型就赋值，没有默认是 1（教师提交）
        type: this.approvalType
      }
      //如果是组间互评  需要多传 leaderId 组长id
      if (this.approvalType == 4) {
        data.leaderId = this.$route.query.leaderId
      }
      return data
    },
    //自动赋分
    giveDafaultScore() {
      // stuEvaluateList copyGradeEntityList
      //小组模式
      this.calculateScore(false)
      if (this.groupId) {
        //独立给分
        if (this.evaluateType == 1) {
          for (const argument of this.copyGradeEntityList) {
            for (const groupMemberScoreGotListElement of this.groupMemberScoreGotList) {
              if (argument.studentId == groupMemberScoreGotListElement.studentId) {
                for (const ccExamEvaluateItem of argument.ccExamEvaluateCategoryEntityList) {
                  for (const ccExamEvaluateParamEntityListElement of ccExamEvaluateItem.ccExamEvaluateParamEntityList) {
                    ccExamEvaluateParamEntityListElement.score = ((groupMemberScoreGotListElement.score / this.formatPaperData.totalScore) * 100).toFixed(1)
                  }
                }
              }
            }
          }
        } else {
          for (const argument of this.stuEvaluateList) {
            for (const groupMemberScoreGotListElement of this.groupMemberScoreGotList) {
              for (const ccExamEvaluateItem of argument.ccExamEvaluateParamEntityList) {
                ccExamEvaluateItem.score = ((this.groupMemberScoreGotList[0].score / this.formatPaperData.totalScore) * 100).toFixed(1)
              }
            }
          }
        }
      } else {
        for (const argument of this.stuEvaluateList) {
          for (const ccExamEvaluateParamEntityListElement of argument.ccExamEvaluateParamEntityList) {
            ccExamEvaluateParamEntityListElement.score = ((this.totalScoreGot / this.formatPaperData.totalScore) * 100).toFixed(1)
          }
        }
      }
    },
    calculateScore(type) {
      let TitleList = this.formatPaperData.examPaperTitleList
      let score = 0
      let groupMemberList = JSON.parse(JSON.stringify(this.formatPaperData.groupMemberList))
      //小组模式
      if (this.groupId) {
        for (const groupItem of groupMemberList) {
          groupItem.score = 0
          for (const item of TitleList) {
            for (const childItem of item.topicList) {
              //判断是否为独立给分
              if (childItem.scoreType == 1) {
                for (const childItemElement of childItem.groupMemberList) {
                  if (childItemElement.studentId == groupItem.studentId) {
                    groupItem.score += childItemElement.scoreGot ? childItemElement.scoreGot : 0
                  }
                }
              } else {
                for (const childItemElement of childItem.groupMemberList) {
                  if (childItemElement.studentId == groupItem.studentId) {
                    groupItem.score += childItem.scoreGot ? childItem.scoreGot : 0
                  }
                }
              }
            }
          }
        }
      } else {
        for (const item of TitleList) {
          for (const childItem of item.topicList) {
            score += childItem.scoreGot ? childItem.scoreGot : 0
          }
        }
      }
      this.groupMemberScoreGotList = groupMemberList
      this.totalScoreGot = score
      if (type) {
        this.openDialog = true
      }
    },
    cancelMyScore() {
      this.groupMemberScoreGotList = []
      this.totalScoreGot = 0
      this.openDialog = false
    },
    //提交分数
    async submitApproval() {
      let arr = this.checkSubmitScore()
      console.log(arr, 'approvalAnswer')
      if (arr) {
        this.$emit('approvalAnswer', arr)
      }
    }
  }
}
</script>

<style scoped lang="scss">
@import "../../../assets/styles/mixin.scss";

.compontent_container {
  width: 100%;

  .top_header {
    width: 100%;
    padding: 14px 24px 7px 35px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #EDEFF0;
    position: relative;

    .top_left {
      display: flex;
      align-items: center;
      gap: 0 23px;

      .top_title {
        font-family: PingFangSC, PingFang SC, sans-serif;
        font-weight: 600;
        font-size: 20px;
        color: #333333;
      }

      .line {
        width: 1px;
        height: 51px;
        background: #E3E4E6;
      }

      .msg_info {
        .text {
          font-family: PingFangSC, PingFang SC, sans-serif;
          font-weight: 500;
          font-size: 14px;
          color: #28B28B;

          span {
            color: #FF8533;
            margin-right: 10px;
          }
        }

        .index_name {
          font-family: PingFangSC, PingFang SC, sans-serif;
          font-weight: 400;
          font-size: 14px;
          color: #28B28B;
        }
      }
    }

    .top_right {
      display: flex;
      align-items: center;
      gap: 0 32px;

      .paper_info {
        display: flex;
        align-items: center;
        gap: 0 14px;

        .text {
          font-family: PingFangSC, PingFang SC, sans-serif;
          font-weight: 400;
          font-size: 16px;
          color: #333333;
        }

        .line {
          width: 1px;
          height: 16px;
          background: #333333;
        }
      }

      .icons {
        display: flex;
        align-items: center;
        gap: 0 20px;

        .answer_sheet_icon {
          font-size: 24px;
          color: #666666;
        }

        .menu_paper {
          font-size: 24px;

          &:hover {
            color: #28B28B;
          }
        }
      }
    }

    .answer_sheet {
      width: 309px;
      box-shadow: 0 6px 14px 0 rgba(0, 55, 49, 0.1);
      border-radius: 0 16px 0 0;
      background: white;
      position: absolute;
      top: 0;
      right: 0;
      z-index: 1;

      .answer_sheet_title {
        width: 100%;
        height: 73px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 24px 7px 35px;
        box-sizing: border-box;
        border-bottom: 1px solid #f2f3f4;
        text-align: center;
        font-size: 18px;
        font-weight: 600;
        color: #333333;

        .menu_paper {
          font-size: 24px;
        }
      }

      .sheet_question_list {
        height: 60vh;
        overflow: auto;
        padding: 32px 24px;
        box-sizing: border-box;
        background: white;

        .sheet_question_item {
          display: inline-block;
          font-size: 16px;
          font-weight: 500;
          color: #333333;
          font-family: PingFangSC, PingFang SC, sans-serif;
          margin-bottom: 12px;

          .paperTitle {
            font-size: 14px;
            color: #999999;
            font-family: PingFangSC, PingFang SC, sans-serif;
            font-weight: 400;
            margin-left: 6px;
          }
        }

        .sheet_answer_collect {
          display: flex;
          flex-wrap: wrap;
          margin-bottom: 12px;

          &_item {
            cursor: pointer;
            user-select: none;
            margin: 0 10px 10px 0;
            width: 36px;
            height: 36px;
            background: #ffffff;
            color: #999999;
            border-radius: 50%;
            border: 1px solid #28b28b;
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }
      }
    }
  }

  .main_content {
    width: 100%;
    display: flex;

    .content_left {
      flex: 1;
      padding: 13px 35px;
      height: calc(100vh - 190px);
      overflow: auto;
      box-sizing: border-box;
      position: relative;

      .answer_list {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 10px 0;

        .paper_title_box {
          font-size: 16px;
          font-weight: 500;
          font-family: PingFangSC, PingFang SC, sans-serif;
          color: #000000;
          margin-bottom: 16px;

          .paper_title {
            font-family: PingFangSC, PingFang SC, sans-serif;
            margin-left: 6px;
            font-size: 14px;
            font-weight: 400;
            color: #949494;
          }
        }

        .answer_question {
          .question_content {
            font-family: PingFangSC, PingFang SC, sans-serif;
            font-weight: 400;
            font-size: 16px;
            color: #333333;
          }

          .item_answer {
            width: 100%;
            margin: 22px 0 0;

            .blank_item {
              display: flex;
              align-items: center;
              margin: 10px 0;

              .formula_text {
                min-width: 256px;
                margin-left: 11px;
              }

              &_info {
                min-width: 160px;
                padding: 6px 10px;
                box-sizing: border-box;
                color: #a0a09f;;
                border-radius: 8px;
                background: #f5f7fa;
                border: 1px solid #e4e7ed;
                cursor: not-allowed;
              }

              &_label {
                font-size: 14px;
                font-weight: 400;
                color: #a0a09f;
              }

              &_answer {
                width: 256px;
                margin-left: 11px;
              }

              &_right {
                margin-left: 12px;
              }

              .answer_content {
                font-family: PingFangSC, PingFang SC, sans-serif;
                font-size: 14px;
                color: #333333;
              }
            }

            .option_item {
              display: flex;
              margin-bottom: 22px;

              .option_label {
                width: 24px;
                height: 24px;
                margin-right: 10px;
                background: #FFFFFF;
                border: 1px solid #DDDDDD;
                border-radius: 50%;
                font-family: PingFangSC, PingFang SC, sans-serif;
                font-weight: 400;
                font-size: 14px;
                color: #999999;
                display: flex;
                justify-content: center;
                align-items: center;
              }

              .option_selected {
                color: #68d9ff !important;
                background: #daf1ff !important;
                border: 1px solid #daf1ff;
              }

              .right_bg {
                color: #ffffff !important;
                background: #28B28B !important;
                border: 1px solid #28B28B;
              }

              .wrong_bg {
                color: #ffffff !important;
                background: #FE5B59 !important;
                border: 1px solid #FE5B59;
              }

              .option_value{
                min-width: 0;
                flex:1;
                font-family: PingFangSC, PingFang SC, sans-serif;
                font-weight: 400;
                font-size: 16px;
                color: rgba(0, 0, 0, 0.85);
              }
            }

            .textarea {
              width: 60%;
              font-size: 16px;
            }

            .attachment {
              width: 100%;
              padding: 25px 0 0;
              box-sizing: border-box;
              display: flex;

              &_sugest {
                font-size: 14px;
                font-weight: 400;
                color: #999999;
                margin-top: 16px;
              }

              .pictures {
                margin-left: 10px;
              }
            }
          }

          .detail_box {
            margin-top: 10px;
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 10px 0;

            .answer_right {
              font-family: PingFangSC, PingFang SC, sans-serif;
              font-weight: 400;
              font-size: 16px;
              color: #09c1ae;
            }

            .answer_fail {
              font-family: PingFangSC, PingFang SC, sans-serif;
              font-weight: 400;
              font-size: 16px;
              color: #FE5B59;
            }

            .score_got {
              font-family: PingFangSC, PingFang SC, sans-serif;
              font-weight: 400;
              font-size: 16px;
              color: rgba(0, 0, 0, 0.85);
            }

            .resolve_text {
              font-family: PingFangSC, PingFang SC, sans-serif;
              font-weight: 400;
              font-size: 16px;
              color: #333333;
            }

            .settle_imgs {
              width: 100%;
              display: flex;

              .settle_lavel {
                width: 100px;
              }

              .picture_list {
                width: 100%;
                display: flex;
                flex-wrap: wrap;
                gap: 16px;

                .view_img {
                  width: auto;
                  height: 100px;

                  .view_img_url {
                    width: 100%;
                    height: 100%;
                  }

                  .close_img {
                    position: absolute;
                    right: -6px;
                    top: -6px;
                  }
                }

                .empty_text {
                  font-family: PingFangSC, PingFang SC, sans-serif;
                  font-size: 16px;
                  color: #999999;
                }
              }
            }
          }
        }
      }

      .evaluate_main {
        width: 100%;
        margin-top: 10px;

        .select {
          margin: 0 0 20px;

          .label {
            margin-right: 10px;
          }
        }

        .others_content {
          width: 100%;
          box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
          padding: 20px;
          box-sizing: border-box;
          border-radius: 10px;
          overflow: auto;
          margin-bottom: 50px;

          .title {
            font-size: 16px;
            font-family: PingFangSC, PingFang SC, sans-serif;
            font-weight: 500;
            color: #333333;
            margin-bottom: 20px;

            span {
              font-family: PingFangSC, PingFang SC, sans-serif;
              font-weight: 400;
              font-size: 14px;
              color: #ff9b0f;
              margin-left: 8px;
            }
          }

          &_item {
            width: 100%;
            padding: 16px 32px;
            box-sizing: border-box;
            background: #ffffff;
            border-radius: 12px;
            border: 1px solid #ebebeb;
            margin-bottom: 20px;

            .title_child {
              font-size: 16px;
              font-family: PingFangSC, PingFang SC, sans-serif;
              font-weight: 500;
              color: #333333;
              margin-bottom: 10px;
            }

            .param_list {
              display: flex;
              flex-wrap: wrap;
              gap: 16px;
              justify-content: flex-start;

              .param_item {
                display: flex;
                gap: 0 8px;
                align-items: center;

                .text {
                  font-family: PingFangSC, PingFang SC, sans-serif;
                  font-weight: 400;
                  font-size: 14px;
                  color: #666666;
                }

                .param_ipt {
                  width: 70px !important;
                }
              }
            }
          }
        }
      }
    }

    .content_right {
      width: 309px;
      height: calc(100vh - 190px);
      border-left: 1px solid #EDEFF0;

      .right_main {
        width: 100%;
        padding: 12px;
        box-sizing: border-box;
        height: calc(100vh - 250px);
        overflow: auto;

        .paper_box {
          font-size: 16px;
          font-weight: 500;
          font-family: PingFangSC, PingFang SC, sans-serif;
          color: #000000;
          margin-bottom: 16px;

          .paper_title {
            font-family: PingFangSC, PingFang SC, sans-serif;
            margin-left: 6px;
            font-size: 14px;
            font-weight: 400;
            color: #949494;
          }
        }

        .approval_question {
          display: flex;
          flex-direction: column;

          .approval_score {

          }

          .group_approval_all {

          }
        }
      }

      .btns {
        width: 100%;
        display: flex;
        justify-content: center;
        padding: 10px 0;
        box-sizing: border-box;
        gap: 0 14px;

        .preview_btn {
          @include plain_hover(#ffffff, #28B28B, #ffffff) {
            width: 80px;
            height: 32px;
            border-radius: 8px;
            border: 1px solid #28B28B;
          }
        }

        .prev_btn {
          @include plain_hover(rgba(40, 178, 139, 0.20), #28B28B, #ffffff) {
            width: 80px;
            height: 32px;
            border-radius: 8px;
            border: 1px solid #28B28B;
          }
        }

        .update_btn {
          @include btn_plain(#28B28B, #ffffff) {
            width: 80px;
            height: 32px;
            border-radius: 8px;
          }

          &:hover {
            background: #2a9e7c;
          }
        }
      }

    }
  }
}

.approval_item {
  display: flex;
  align-items: center;

  .scoreget_label {
    font-family: PingFangSC, PingFang SC, sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #333333;
    width: 100px;
  }

  .radio_group {

  }

  .ipt_number_item {
    color: #000000;
  }
}

.approval_remoke_item {
  margin-top: 11px;

  .scoreget_label {
    font-family: PingFangSC, PingFang SC, sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #333333;
  }

  .remake_approval {
    margin-top: 11px;
    width: 266px;
    font-size: 16px;
    font-family: PingFangSC, PingFang SC, sans-serif;
    font-weight: 400;

    ::v-deep .el-textarea__inner {
      font-weight: 400;
    }
  }
}

.textarea_info {
  min-width: 160px;
  max-width: 700px;
  min-height: 40px;
  padding: 6px 10px;
  box-sizing: border-box;
  color: #a0a09f;;
  border-radius: 8px;
  background: #f5f7fa;
  border: 1px solid #e4e7ed;
  cursor: not-allowed;
  font-family: PingFangSC, PingFang SC, sans-serif;
}

.color_dark_green {
  color: #09c1ae !important;
}

.mb_11 {
  margin-bottom: 11px;
}

.right_answer {
  background: #b3fcd6 !important;
  color: #28B28B !important;
  border: 1px solid #b3fcd6 !important;
}

.selected {
  background: #daf1ff !important;
  color: #03c4ff !important;
  border: 1px solid #daf1ff !important;
}

.fail_select {
  background: #ffcfce !important;
  color: #e95756 !important;
  border: 1px solid #ffcfce !important;
}

.add_class {
  width: 680px;
  display: flex;
  flex-wrap: wrap;

  .upload_new {
    width: 90px;
    height: 90px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #f5f5f5;
    cursor: pointer;
    margin-right: 12px;

    .el-icon-plus {
      font-size: 18px;
      font-weight: bold;
      color: #999999;
    }

    .upload_txt {
      margin-top: 8px;
      font-size: 10px;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.65);
      user-select: none;
    }
  }

  .view_img_local {
    width: auto;
    height: 90px;
    margin: 0 12px 12px 0;
    position: relative;
  }

  .local_video_box {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f5f5f5;
    cursor: pointer;

    .video_img {
      width: 24px;
      height: 24px;
      object-fit: cover;
      position: absolute;
    }
  }

  .local_img_url {
    width: auto;
    height: 100%;
  }

  .local_other_box {
    width: 90px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #f5f5f5;
    cursor: pointer;

    .el-icon-document {
      font-size: 18px;
      color: #565656;
    }

    .other_text {
      margin-top: 10px;
      font-size: 12px;
      color: #565656;
      display: flex;
      align-items: center;

      span {
        display: inline-block;
        width: 50px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }

  .close_img {
    width: 16px;
    height: 16px;
    position: absolute;
    top: -4px;
    right: -4px;
    cursor: pointer;
  }
}

.video_box {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f5f5f5;
  cursor: pointer;
}
.font_bold{
  font-weight: bold!important;
}
</style>
<style>
.color_info {
  font-family: PingFangSC, PingFang SC, sans-serif;
  font-weight: 400;
  color: #999999;
  margin-left: 4px;
}

.color_orange {
  color: #EF7D00;
}
</style>
